import React from 'react';
import { Layout, Select, Button, Space, Avatar, Modal, Dropdown } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAppStore } from '@/stores';
import { GlobalOutlined, LogoutOutlined } from '@ant-design/icons';

const { Header, Content } = Layout;

export const MainLayout: React.FC = () => {
  const { t, i18n } = useTranslation();
  const { user, logout } = useAppStore();
  const navigate = useNavigate();
  const handleLanguageChange = (value: string) => {
    i18n.changeLanguage(value);
  };
  const handleLogout = () => {
    Modal.confirm({
      title: t('auth.logoutConfirmTitle'),
      content: t('auth.logoutConfirmContent'),
      okText: t('common.confirm'),
      cancelText: t('common.cancel'),
      onOk: () => {
        logout();
        navigate('/login')
      }
    });
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px' }}>
        <div style={{ color: 'white', fontSize: '20px' }}>PayPaya CMS</div>
        <Space>
          <Dropdown
            className='pr-4'
            menu={{
              items: [
                { key: 'zh-CN', label: '简体中文' },
                { key: 'en-US', label: 'English' }
              ],
              onClick: ({ key }) => handleLanguageChange(key),
              selectedKeys: [i18n.language]
            }} trigger={['hover']}>
            <Space style={{ cursor: 'pointer', color: '#fff' }}>
              <GlobalOutlined />
              {i18n.language === 'zh-CN' ? '简体中文' : 'English'}
            </Space>
          </Dropdown>
          <Dropdown menu={{
            items: [
              {
                key: 'logout',
                icon: <LogoutOutlined />,
                label: t('auth.logout'),
                onClick: handleLogout
              }
            ]
          }} trigger={['hover']}>
            <Space style={{ cursor: 'pointer' }}>
              <Avatar src={user?.avatar} alt={user?.name}>
                {user?.name?.[0]}
              </Avatar>
              <span className='text-white'>{user?.name}</span>
            </Space>
          </Dropdown>
        </Space>
      </Header>
      <Content style={{ padding: '24px' }}>
        <Outlet />
      </Content>
    </Layout>
  );
};